<!-- 土地类型 -->
<template>
  <section class="content">
    <div style="margin:0 auto; height:auto; padding-top:40px;">
      <p style="text-align:center;">
          <table><tr>
        <td><img :src="url1" preview="1" width="70%" height="70%"></td>
        <td><img :src="url2" preview="1" width="70%" height="70%"></td>
        </tr></table>
      </p>
      <p style="text-align:center;">
        <img :src="url3" preview="1" width="60%" height="80%">
      </p>
    </div>
   
  </section>
</template>
<script>
export default {
  data() {
    return {
      url1:  'http://perrin.oss-cn-beijing.aliyuncs.com/cumtb/GroundUse/mianjibingfu/2013bingzhuangtu.PNG',
      url2:  'http://perrin.oss-cn-beijing.aliyuncs.com/cumtb/GroundUse/mianjibingfu/2017bingzhuangtu.PNG',
      url3:  'http://perrin.oss-cn-beijing.aliyuncs.com/cumtb/GroundUse/mianjibingfu/2013_2017.PNG',
      id: null,
      project: null,
      projectList: [],
      input: null,
      currentPage: 1,
      totalRecord: 0,
      totalPage: 0,
      tableData: [],
      detail: false,
      photo: [],
      formLabelWidth: "100px",
      riskRecord: {
        id: "",
        title: "111",
        brief: "222",
        photo: []
      },
      detailRecord:[{
        id: "1",
        title: "我是标题",
        brief: "我是日志",
        photo: "我是图片"
      }]
    };
  },
  methods: {
    handleEdit(index, row) {
      // row为当前行的一个对象
     this.riskRecord.title = row.title
     let data = {id:row.id}
     this.riskTabModel.queryList(data)
     .then(res =>{
       this.riskRecord.brief = res.data.list[0].brief  
       if (res.data.list[0].photo != null && res.data.list[0].photo != '') {
         this.photo = JSON.parse(res.data.list[0].photo)
       }else{
         this.photo = []
       }
      this.$previewRefresh()
     })
     .catch(err => {
       console.log(err.message)
     })
      this.detail = true;
    },
    search() {
      let data = {
        projectId : this.project,
        title: this.input
      }
        this.riskTabModel.querySearch(data)
        .then(res => {
          this.totalRecord = res.data.totalRecord;
          this.totalPage = res.data.totalPage;
          this.tableData = res.data.list;
        })
        .catch(err => {
          console.log(err.message);
        })
    },
    selectKey(id) {
      this.id = id;
      this.project = id;
      this.currentPage = 1;
      let obj = {};
      obj = this.projectList.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
      this.handleCurrentChange();
    },
    handleCurrentChange(event) {
      let queryData = {
        projectId: this.project,
        currentPage: this.currentPage,
        pageSize: "10"
      };
      this.riskTabModel
        .queryList(queryData)
        .then(res => {
          this.totalRecord = res.data.totalRecord;
          this.totalPage = res.data.totalPage;
          this.tableData = res.data.list;
        })
        .catch(err => {
          console.log(err.message);
        });
    },

    //上一页
    handlePreClick(event) {
      if (this.currentPage != 1) {
        this.currentPage--;
      }
    },

    //下一页
    handleNextClick(event) {
      if (this.currentPage != this.totalPage) {
        this.currentPage++;
      }
    },

    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    
  },
  mounted() {
    this.projectModel
      .projectGetAll()
      .then(res => {
        this.projectList = res.data;
      })
      .catch(err => {
        console.log(err.message);
      });
    let queryData = {
      currentPage: "1",
      pageSize: "10"
    };
    this.riskTabModel
      .queryList(queryData)
      .then(res => {
        this.totalRecord = res.data.totalRecord;
        this.totalPage = res.data.totalPage;
        this.tableData = res.data.list;
      })
      .catch(err => {
        console.log(err.message);
      }); 
  }
};
</script>

<style scoped>
#brief {
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
.content {
  overflow-y: auto;
  padding-top: 10px;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
</style>
